<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Three.js" data-ke-src="../Three.js"></script>
    <style>
        #webGL {
            width:1000px;
            height: 1000px;
        }
    </style>
</head>
<body>
    <div id = "webGL">

    </div>
    <script>
        //渲染器构建
        const width = document.getElementById("webGL").clientWidth
        const height = document.getElementById("webGL").clientHeight

        var renderer;
        function initRenderer() {
            renderer = new THREE.WebGLRenderer({
                antialias: true  //反锯齿
            })
            renderer.setSize(width,height)
            document.getElementById("webGL").appendChild(renderer.domElement) 
            renderer.setClearColor(0xFFFFFF,1.0) 
        }
        //相机构建
        var camera;
        function initCamera() {
                        //perspective camera 透视相机
            camera = new THREE.PerspectiveCamera(45,width/height,1,10000)
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 1000;
            camera.up.x = 0;
            camera.up.y = 1;
            camera.up.z = 0;
            camera.lookAt({
                x : 0,
                y : 0,
                z : 0
            });
        }
        //场景构建
        var scene; 
        function initScene() {
            scene = new THREE.Scene()
        }
        //尚未学习 加不加都行
        var light;
        function initLight() {
            light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
            light.position.set(100, 100, 200);
            scene.add(light);
        }
        //物体构建
        var cube;  //立方体
        function initObject() {
            /* 几何体里面有一个vertices(顶点)变量，可以用来存放点 */
            var geometry = new THREE.Geometry()  //创建一个几何体
            /**
            LineBasicMaterial({......}) 创建线条的材质
            Color：线条的颜色，用16进制来表示，默认的颜色是白色 若VertexColors = NoColors,该颜色才有效果
            Linewidth：线条的宽度，默认时候1个单位宽度
            Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了
            Linejoin：两个线条的连接点处的外观，默认是“round”，表示圆角
            VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值
            VertexColors: 新版本 VertexColors = THREE.VertexColors; ..NoColors..FaceColors
            Fog：定义材质的颜色是否受全局雾效的影响。
            **/
            var material = new THREE.LineBasicMaterial( { vertexColors: true,color:'white'})

            var p1 = new THREE.Vector3(-100,-100,0)
            var p2 = new THREE.Vector3(100,100,0)
            var p3 = new THREE.Vector3(0,100,0)
            geometry.vertices.push(p1)
            geometry.vertices.push(p2)
            geometry.vertices.push(p3)
            var color1 = new THREE.Color('black')
            var color2 = new THREE.Color(0xFF0000)
            /*
            geometry中colors表示顶点的颜色，
            必须材质中vertexColors等于THREE.VertexColors 时，颜色才有效，
            如果vertexColors等于THREE.NoColors时，颜色就没有效果了
            那么就会去取材质中color的值，这个很重要，大家一定记住
            */
            geometry.colors.push(color1,color2,color1)

            /*
            第一个参数是几何体geometry，
            里面包含了2个顶点和顶点的颜色。
            第二个参数是线条的材质，或者是线条的属性，表示线条以哪种方式取色。
            第三个参数是一组点的连接方式，我们会在后面详细讲解。
            */
            var line = new THREE.Line( geometry, material, THREE.LineSegments  );
            scene.add(line);
        }
        function threeStart() {
                initRenderer();
                initCamera();
                initScene();
                initLight();
                initObject();
                renderer.clear();
        }
        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }
        threeStart()
        render()
        /* 那我可以在控制台 手动修改 camera.position.z  来放大 或缩小*/
    </script>
</body>
</html>